<template>
  <div class="modal-container" id="modal-opened">
    <div class="modal">
      <div class="modal__details">
        <h2 class="modal__title">查看联系信息</h2>
      </div>
      <p class="modal__text">联系人： 赵子龙</p>
      <p class="modal__text">手机号： 18210392834</p>
      <div style="text-align: right;">
        <button class="modal__btn">确 定</button>
      </div>
      <a href="#modal-closed" class="link-2"></a>
    </div>
  </div>
</template>

<script>
export default {
  name: "great-card"
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  display: none;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;

  background: hsla(0, 0%, 40%, .6);
}

/* using :target */
.modal-container:target {
  display: flex;
}

.modal {
  min-width: 40rem;
  padding: 4rem 2rem;
  border-radius: .8rem;

  color: var(--light);
  background: var(--background);
  box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);
  position: relative;

  overflow: hidden;
}

.modal__details {
  text-align: center;

  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid hsla(0, 0%, 100%, .4);
}

.modal__title {
  font-size: 2rem;
  letter-spacing: 2px;
}

.modal__description {
  margin-top: 2rem;

  font-size: 1.6rem;
  font-style: italic;
}

.modal__text {
  padding: 0 4rem;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  line-height: 24px;
}

.modal__text::before {
  content: '';

  position: absolute;
  top: 0%;
  left: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  width: 18rem;
  height: 18rem;
  border: 1px solid hsla(0, 0%, 100%, .2);
  border-radius: 100rem;

  pointer-events: none;
}

.modal__btn {
  padding: 1rem 1.6rem;
  border: 1px solid hsla(0, 0%, 100%, .4);
  border-radius: 100rem;

  color: inherit;
  background: transparent;
  font-size: 1.4rem;
  font-family: inherit;
  letter-spacing: .2rem;

  transition: .2s;
  cursor: pointer;
}

.modal__btn:hover,
.modal__btn:focus {
  border-color: hsla(0, 0%, 100%, .6);
  -webkit-transform: translateY(-.2rem);
  transform: translateY(-.2rem);
}
</style>
